<script>
import UserApi from "../../api/user";

export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    async getUser(userId) {
      try {
        const api = new UserApi();
        let res = await api.find(userId);
        this.user = res.data;
        console.log(this.user);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async saveUser() {
      try {
        const api = new UserApi();
        let res = await api.changeProfile(this.user);
        if (res.code === 200) {
          this.$myMessageBox(res.msg);
          this.$router.replace({ name: "user-profile" });
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  mounted() {
    this.getUser(this.$route.params.id);
  }
};
</script>

<template>
  <div class="user-profile-edit">
    <div class="header">
      <h2>用户信息修改</h2>
      <p>
        <router-link class="button" :to="'/user/change-profile/' + user.id"
          >修改个人信息</router-link
        >
        <router-link class="button" :to="'/user/change-password/' + user.id">修改密码</router-link>
        <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
      </p>
    </div>
    <div class="block">
      <p>
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" v-model="user.nickname" />
      </p>
      <p>
        <label for="truename">姓名</label>
        <input type="text" id="truename" v-model="user.truename" />
      </p>
      <p><button @click="saveUser">保存</button></p>
    </div>
  </div>
</template>

<style scoped></style>
